<!DOCTYPE html>
<!-- saved from url=(0059)http://fantaghiro.github.io/miaov/JS_Basic_Lessons/2-3.html -->
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta charset="UTF-8">
	<title>自动生成一个V字形</title>
	<style>
		div {
			width: 50px;
			height: 50px;
			color: white;
			background: red;
			line-height: 50px;
			font-size: 28px;
			font-weight: bold;
			position: absolute;
			text-align: center;
		}
		#div1 {
			position: relative;
		}
	</style>
	<script>
		window.onload = function(){

			var oBtn = document.getElementsByTagName('input')[0],
				oCanvas = document.getElementById('div1'),
				str = '',
				left,
				top,
				length = 5;

			oBtn.onclick = function(){
				for (var i=0; i<length; i++) {
					left = i*50 + 'px';
					if (i<length/2) {
						top = i*50 + 'px';
					} else {
						top = (length-i-1)*50 + 'px';
					}
					str += '<div style="top:' + top + '; left:' + left + '">' + i + '</div>'
				}

				oCanvas.innerHTML = str;
			}
		}
	</script>
</head>
<body>
	<input type="button" value="自动生成一个V字形">
	<section id="div1">
        <div style="top:0px; left:0px">0</div>
        <div style="top:50px; left:50px">1</div>
        <div style="top:100px; left:100px">2</div>
        <div style="top:50px; left:150px">3</div>
        <div style="top:0px; left:200px">4</div>
    </section>
</body>
</html>